<template>
  <div class="page-box">
    <div class="head">
      <span class="title">系统菜单管理</span>
      <div class="toolbar">
        <el-button type="primary" icon="Plus" @click="addOrModify(null, 1)">添加</el-button>
      </div>
    </div>

    <div class="table">
      <el-table stripe v-loading="loading" :data="listData" row-key="id" default-expand-all>
        <el-table-column prop="menuName" label="名称" />
        <el-table-column prop="menuSort" label="排序" />
        <el-table-column prop="menuStatus" label="状态" #default="{ row }">
          {{ row.menuStatus === 1 ? '正常' : '禁用' }}
        </el-table-column>
        <el-table-column prop="created" label="创建时间" align="right" />
        <el-table-column prop="updated" label="修改时间" />
        <el-table-column label="操作" fixed="right" width="200" align="center" #default="{ row }">
          <el-button type="primary" icon="Plus" @click="addOrModify(row, 2)" />
          <el-button type="primary" icon="Edit" @click="addOrModify(row, 3)" />
          <el-button type="danger" icon="Delete" @click="del(row.id)" />
        </el-table-column>
      </el-table>
    </div>

    <el-drawer
        size="36%"
        :title="addOrModifyDrawerTitle"
        v-model="isShowAddOrModifyDrawer"
        direction="rtl"
        :before-close="addOrModifyDrawerClose"
        @opened="addOrModifyDrawerOpened(addOrModifyFormRef)"
    >
      <div class="form-content">
        <el-form ref="addOrModifyFormRef" label-width="70px" :model="addOrModifyModel" :rules="addOrModifyRules">
          <el-form-item v-show="isShowParentMenu" label="上级菜单">
            <el-input v-model="parentMenuName" disabled />
          </el-form-item>
          <el-form-item label="名称" prop="menuName">
            <el-input v-model="addOrModifyModel.menuName" placeholder="菜单名称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="路由" prop="routeName">
            <el-input v-model="addOrModifyModel.routeName" placeholder="前端路由名称" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="路径" prop="menuPath">
            <el-input v-model="addOrModifyModel.menuPath" placeholder="后端路径" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="status" />
          </el-form-item>
          <el-form-item label="排序" prop="menuSort">
            <el-input v-model="addOrModifyModel.menuSort" placeholder="菜单排序" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="doAddOrModify">
              {{ loading ? '正在提交 ...' : '提交' }}
            </el-button>
            <el-button @click="addOrModifyDrawerClose">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog
        v-model="isShowDelDialog"
        title="提示"
        width="30%"
        :before-close="delDialogClose"
    >
      <span>确定要删除吗？</span>
      <template #footer>
        <span>
          <el-button @click="delDialogClose">取消</el-button>
          <el-button type="primary" :loading="loading" @click="doDel">
            {{ loading ? '正在删除 ...' : '确定' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { GetAllData } from '@/api/system/sysMenu'
import { ElMessage } from "element-plus"
import { AddData, ModifyData, DeleteData } from "@/api/system/sysMenu"

const loading = ref(false)

/* 添加修改开始 */
const addOrModifyFormRef = ref()
const addOrModifyDrawerTitle = ref('')
const isShowAddOrModifyDrawer = ref(false)
const status = ref(true)
const parentMenuName = ref('无')
const isShowParentMenu = ref(true)

const addOrModifyData = {
  parentId: 0,
  menuName: '',
  menuPath: '',
  menuStatus: 1,
  menuSort: 1,
  routeName: '',
}
const addOrModifyModel = ref({ ...addOrModifyData })

const addOrModifyRules = ref({
  menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  routeName: [{ required: true, message: '请输入前端路由名', trigger: 'blur' }],
  menuPath: [{ required: true, message: '请输入后端路径', trigger: 'blur' }],
  menuSort: [
    { required: true, message: '请输入菜单排序', trigger: 'blur' },
    { pattern: /^[0-9]+$/, message: '菜单排序必须是数字', trigger: 'blur' }
  ],
})

const addOrModify = (row, t) => {
  if (row == null) {
    isShowParentMenu.value = false
    addOrModifyDrawerTitle.value = '添加一级菜单'
  } else {
    if (t === 2) {
      addOrModifyDrawerTitle.value = '添加子菜单'
      parentMenuName.value = row.menuName
      addOrModifyModel.value.parentId = row.id
    } else {
      isShowParentMenu.value = false
      status.value = row.menuStatus === 1
      addOrModifyDrawerTitle.value = '编辑菜单'
      addOrModifyModel.value = { ...row }
      delete addOrModifyModel.value.created
      delete addOrModifyModel.value.updated
      delete addOrModifyModel.value.children
    }
  }
  isShowAddOrModifyDrawer.value = true
}

const doAddOrModify = () => {
  if (loading.value) {
    return
  }
  addOrModifyFormRef.value.validate(async valid => {
    if (!valid) {
      return
    }
    loading.value = true
    addOrModifyModel.value.menuStatus = status.value ? 1 : 0;
    let code, message
    if (addOrModifyModel.value.id) {
      const result = await ModifyData(addOrModifyModel.value)
      code = result.code
      message = result.message
    } else {
      const result = await AddData(addOrModifyModel.value)
      code = result.code
      message = result.message
    }
    loading.value = false
    if (code !== 200) {
      ElMessage.error(message)
      return
    }
    isShowAddOrModifyDrawer.value = false
    resetAddOrModify()
    await fetchListData()
    ElMessage.success(message)
  })
}

const addOrModifyDrawerOpened = formEl => {
  formEl.clearValidate()
}

const resetAddOrModify = () => {
  isShowParentMenu.value = false
  parentMenuName.value = '无'
  status.value = true
  addOrModifyFormRef.value.resetFields()
  addOrModifyModel.value = { ...addOrModifyData }
  loading.value = false
}

const addOrModifyDrawerClose = () => {
  if (loading.value) {
    return
  }
  resetAddOrModify()
  isShowAddOrModifyDrawer.value = false
}
/* 添加修改结束 */

/* 列表开始 */
const listData = ref([])

const fetchListData = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  const { code, message, data } = await GetAllData()
  loading.value = false
  if (code !== 200) {
    ElMessage.error(message)
    return
  }
  listData.value = data
}

onMounted(() => {
  fetchListData()
})
/* 列表结束 */

/* 删除开始 */
const isShowDelDialog = ref(false)
const delModel = ref({ ids: [] })

const del = id => {
  delModel.value.ids.push(id)
  isShowDelDialog.value = true
}

const doDel = async () => {
  if (loading.value) {
    return
  }
  if (delModel.value.ids.length <= 0) {
    ElMessage.error('请至少选择一项')
    return
  }
  loading.value = true
  const { code, message } = await DeleteData(delModel.value)
  loading.value = false
  if (code !== 200) {
    ElMessage.error(message)
    return
  }
  isShowDelDialog.value = false
  resetDel()
  await fetchListData()
  ElMessage.success(message)
}

const resetDel = () => {
  delModel.value.ids = []
  loading.value = false
}

const delDialogClose = () => {
  if (loading.value) {
    return
  }
  resetDel()
  isShowDelDialog.value = false
}

const selectionChange = arr => {
  delModel.value.ids = []
  arr.forEach(row => {
    delModel.value.ids.push(row.id)
  })
}
/* 删除结束 */
</script>

<style scoped lang="scss">
.page-box {
  width: 100%;
  box-sizing: border-box;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
    background: #fff;
    .title {
      font-size: 16px;
    }
    .toolbar {
      padding: {
        right: 20px;
      }
    }
  }
  .table {
    padding: 20px;
    background: #fff;
  }
}
</style>
